<template>
  <header class="nearsHeader___38Gh7 fixedHeader___2FOOy">
    <div class="left___1QMGE">
      <h1>
        <router-link to="/qrcode" class="logo___2JMxs site-entry" title="蒜苔二维码生成器">
          <img alt="蒜苔二维码生成器" src="../assets/images/suantai-logo.svg"/>
        </router-link>
      </h1>
      <ul class="siteEntry___nqslB">
        <li class=""><router-link class="nav-platform-fn" to="/qrcode/features">平台功能</router-link></li>
        <li class=""><router-link class="nav-case" to="/qrcode/case">应用方案</router-link></li>
        <li class=""><a class="nav-templates" href="#template">模板库</a></li>
        <li class=""><router-link class="nav-pricing" to="/qrcode/price">价格</router-link></li>
        <li class=""><router-link class="nav-community" to="/qrcode/community">社区</router-link></li>
        <li class=""><router-link class="nav-help" to="/qrcode/help">帮助</router-link></li>
        <li class=""><router-link class="nav-aboutus" to="/qrcode/aboutus">关于我们</router-link></li>
      </ul>
    </div>
    <div class="actions___3uo5C">
      <div class="__global-search globalSearch___18v4r">
        <input v-model="searchText" autocomplete="off" placeholder="找教程，模板，社区问答"/>
        <i class="clifont anticon-nav_search header-submit-search searchSubmit___197Pn" @click="handleSearch"></i>
      </div>
      <div class="ai-assistant-btn" id="ai-assistant-entry-in-header">
        <div style="display:flex;align-items:center">
          <img alt="" height="20" src="../assets/images/86f2099e0203.png" width="20"/>
          <span style="margin-left:4px">蒜苔助手</span>
        </div>
      </div>
      <a class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-text login___3F0vv neverLogin___11LtN nav-login"
         href="#login"
         @click.prevent="showLoginModal">
        <span>登录</span>
      </a>
      <a class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-primary __nears_primary_1 ant4-btn-background-ghost register___12NBJ nav-register"
         href="#register"
         @click.prevent="showRegisterModal">
        <span>免费注册</span>
      </a>
    </div>
    <div class="customHeaderContainer___3QFn5"></div>
    <!-- 注册弹窗 -->
    <RegisterModal
      v-model="registerModalVisible"
      :iframe-src="registerIframeSrc"
      @close="handleRegisterModalClose"
      @load="handleRegisterModalLoad"
    />
    <!-- 登录弹窗 -->
    <LoginModal
      v-model="loginModalVisible"
      :iframe-src="loginIframeSrc"
      @close="handleLoginModalClose"
      @load="handleLoginModalLoad"
    />
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RegisterModal from '../pages/register/index.vue'
import LoginModal from '../pages/login/index.vue'

// 搜索相关
const searchText = ref('')
const handleSearch = () => {
  console.log('搜索:', searchText.value)
}

// 注册弹窗相关
const registerModalVisible = ref(false)
// 注册页面 iframe 地址（保留双方更改，默认至 /qrcode/register）
const registerIframeSrc = ref('/qrcode/register')

// 登录弹窗相关
const loginModalVisible = ref(false)
// 登录页面 iframe 地址
const loginIframeSrc = ref('/qrcode/login')

// 显示登录弹窗
const showLoginModal = () => {
  console.log('显示登录弹窗')
  loginModalVisible.value = true
}

// 显示注册弹窗
const showRegisterModal = () => {
  console.log('显示注册弹窗')
  registerModalVisible.value = true
}

// 注册弹窗关闭回调
const handleRegisterModalClose = () => {
  console.log('注册弹窗已关闭')
  registerModalVisible.value = false
}

// 登录弹窗关闭回调
const handleLoginModalClose = () => {
  console.log('登录弹窗已关闭')
  loginModalVisible.value = false
}

// 注册弹窗 iframe 加载完成回调
const handleRegisterModalLoad = () => {
  console.log('注册页面 iframe 加载完成')
}

// 登录弹窗 iframe 加载完成回调
const handleLoginModalLoad = () => {
  console.log('登录页面 iframe 加载完成')
}
</script>

<style scoped>
/* 使用原始样式，确保图标字体正常显示 */
.clifont {
  font-family: "clifont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: inherit;
}
</style>
